<template>
  <div class="message clearfix" :class="{theme2: theme == 2}">
    <div class="image">
      <img v-if="theme == 2" @click.stop="$router.push(`/orderDetail?id=${message.id}`)" :src="message.goodsInfoList[0].goods_mainphoto_path">
      <img class="minimg" v-else v-lazy="message.goodsInfoList[0].goods_mainphoto_path">
    </div>
    <div class="content">
      <div class="line">
        <div class="order-number">
          <span>订单号：</span><span class="number" v-text="messageEncode"></span>
        </div>
      </div>
      <div class="line mt50" v-if="theme == 1">
        <span class="state">{{message.orderStatus | filStatus}}</span>
        <button class="go-to btn-connect" @click="$router.push(`/orderDetail?id=${message.id}`)">立即查看</button>
      </div>
      <div class="line mt10" v-if="theme == 2" @click.stop="$router.push(`/orderDetail?id=${message.id}`)">
        <span class="state">{{message.orderStatus | filStatus}}</span>
      </div>
      <div class="line mt10" v-if="theme == 2">
        <span class="state" @click.stop="this.open(`/orderDetail?id=${message.id}`)">去看看</span>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
  export default {
    props: {
      message: [Object],
      theme: {
        type: Number,
        default: 1
      }
    },
    filters: {
      // 订单状态过滤器
      filStatus(status) {
        switch (status) {
          case '0':
            return '交易已关闭'
          case '10':
            return '等待买家付款'
          case '20':
            return '买家已付款'
          case '21':
          case '22':
            return '退款审核中'
          case '25':
            return '已退款'
          case '30':
            return '卖家已发货'
          case '40':
            return '买家已收货'
          case '50':
            return '已评价'
        }
      }
    },
    computed: {
      // 加密后的订单号
      messageEncode() {
        // 如果订单号不存在，则直接返回空字符串
        if (!this.message.orderId) {
          return ''
        }

        // 如果在头部菜单中展示
        if (this.theme == 2) {
          return this.message.orderId.slice(0, 3) + '***' + this.message.orderId.slice(18, 21)
        }
        return this.message.orderId.slice(0, 10) + '***' + this.message.orderId.slice(18, 21)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .clear {
    clear: both;
  }
  .mt10 {
    margin-top: 10px;
  }
  .mt50 {
    margin-top: 50px;
  }

  .message {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    height: 120px;
    padding: 20px;

    &.theme2 {
      border: 0px;
      padding: 10px;
      height: 80px;
      padding: 10px;

      .image {
        width: 60px;
        height: 60px;
      }
    }
    .image {
      float: left;
      width: 80px;
      height: 80px;
    }

    .content {
      width: calc(100% - 80px);
      padding-left: 10px;
      float: left;

      .line {
        text-align: left;
        height: 14px;

        .order-number {
          color: #999999;
          font-size: 12px;
          height: 14px;
          padding-top: 2px;

          .number {
            color: #666666;
          }
        }

        .state {
          color: #F00384;
          font-size: 12px;
        }

        .go-to {
          float: right;
          margin-top: -10px;
        }
      }
    }
  }
</style>